<template>
  <div class="card-container">
    <div class="info-title">
      订单信息
    </div>
    <div style="position: relative;" class="info-card">
      <div class="info-card-left">
        <div>订单编号</div>
        <div>下单时间</div>
        <div>订单状态</div>
      </div>
      <div class="info-card-right">
        <div>{{orderInfo.billlcode || ''}}</div>
        <div>{{timeText}}</div>
        <div>{{statusText}}</div>
      </div>
      <!-- 0已申请 1开票中 2开票成功 3已发货 -1失败 -2默认的（自己填写的） -->
      <div v-if="orderInfo.status==1&&orderInfo.invoiceStatus==-2" @click="invoicePage()" class="invoice">申请发票</div>
      <div v-if="orderInfo.status==1&&orderInfo.invoiceStatus==-1" @click="invoicePage()" class="invoice">申请失败</div>
      <div v-if="orderInfo.status==1&&orderInfo.invoiceStatus===0" @click="invoicePage()" class="invoice">已申请</div>
      <div v-if="orderInfo.status==1&&orderInfo.invoiceStatus==1" @click="invoicePage()" class="invoice">查询进度</div>
      <div v-if="orderInfo.status==1&&orderInfo.invoiceStatus==2" @click="invoicePage()" class="invoice">开票成功</div>
      <div v-if="orderInfo.status==1&&orderInfo.invoiceStatus==3" @click="invoicePage()" class="invoice">已发货</div>
      <div v-if="orderInfo.status==1&&orderInfo.invoiceStatus==4" @click="invoicePage()" class="invoice">已退款</div>
      <!-- <div v-if="orderInfo.status==1" @click="invoicePage()" class="invoice">{{invoiceStatus[orderInfo.invoiceStatus]}}</div> -->
    </div>
  </div>
</template>

<script>
import { ORDER_STATUS } from "./constants";
import invoiceStatus from "./../invoice/invoiceStatus";

export default {
  name: "orderInfo",
  props: ["orderInfo"],
  data() {
    return {
      invoiceStatus: invoiceStatus
    };
  },
  computed: {
    statusText() {
      return ORDER_STATUS[this.orderInfo.status] || "未知状态";
    },
    timeText() {
      return this.$moment(this.orderInfo.createTime).format(
        "YYYY.MM.DD HH:mm:ss"
      );
    }
  },
  created: function() {
    console.log(this.props);
  },
  methods: {
    // 申请发票
    invoicePage() {
      this.$parent.invoicePage();
    }
  }
};
</script>

<style scoped lang="scss">
.card-container {
  width: 100%;
  padding: 0;
  overflow: hidden;
  margin-bottom: 24px;
  text-align: left;

  .info-title {
    margin-bottom: 11px;
    font-size: 28px;
    color: #cfcfd0;
  }

  .info-card {
    width: 100%;
    padding: 21px 19px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    * {
      color: #ffffff;
    }

    .info-card-left,
    .info-card-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: left;
      font-size: 24px;
      > div:nth-last-child(n + 2) {
        margin-bottom: 21px;
      }
    }
    .info-card-left {
      margin-right: 48px;
    }
  }
}

.invoice {
  position: absolute;
  right: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
  // background: #000;
  // border: 1px solid #fff;
  background-color: transparent;
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
}
.invoice:active {
  opacity: 0.7;
}
</style>
